<template>
  <div
    class="oc-collapse-item"
    :class="{
      'is-disabled': disabled,
    }"
  >
    <div class="oc-collapse-item__header" :id="`item-header-${name}`" @click="handleClick">
      <slot name="title">{{ title }}</slot>
    </div>
    <div class="oc-collapse-item__content" :id="`item-content-${name}`" v-show="isActive">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { CollapseItemProps } from './types'
import { inject, computed } from 'vue'
import { CollapseContextKey } from './types'
defineOptions({
  name: 'OcCollapseItem',
})
const props = defineProps<CollapseItemProps>()
const collapseContext = inject(CollapseContextKey)
const isActive = computed(() => collapseContext?.activeNames.value.includes(props.name))
const handleClick = () => {
  if (props.disabled) {
    return
  } else {
    collapseContext?.handleItemClick(props.name)
  }
}
</script>

<style scoped>
.oc-collapse-item__header {
  font-size: 30px;
}
</style>
